import { ref } from 'vue'
import html2canvas from 'html2canvas'
import { download } from '@/utils'
import eventBus from '@/utils/bus'
import { CompContextMenuEnum } from '@/enums'

export function useCompContextMenu (curComp: TComp, emits: Function) {
  return ref([
    {
      id: 1,
      label: '隐藏',
      icon: 'Hide',
      handlerConfig: () => {
        curComp.config.isShow = false
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 2,
      label: '复制',
      icon: 'DocumentCopy',
      handlerConfig: () => {
        eventBus.emit(CompContextMenuEnum.COMP_COPY, curComp.id)
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 3,
      label: '剪切',
      icon: 'Scissor',
      handlerConfig: () => {
        eventBus.emit(CompContextMenuEnum.COMP_CUT, curComp.id)
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 4,
      label: curComp.config.draggable ? '禁止拖动' : '允许拖动',
      icon: curComp.config.draggable ? 'Lock' : 'Unlock',
      handlerConfig: () => {
        curComp.config.draggable = !curComp.config.draggable
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 5,
      label: curComp.config.lockAspectRatio ? '解除比例' : '锁定比例',
      icon: curComp.config.lockAspectRatio ? 'Unlock' : 'Lock',
      handlerConfig: () => {
        curComp.config.lockAspectRatio = !curComp.config.lockAspectRatio
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 6,
      label: curComp.config.resizable ? '锁定调整大小' : '解除调整大小',
      icon: curComp.config.resizable ? 'Lock' : 'Unlock',
      handlerConfig: () => {
        curComp.config.resizable = !curComp.config.resizable
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 7,
      label: curComp.config.disabledX ? '允许X轴移动' : '禁止X轴移动',
      icon: curComp.config.disabledX ? 'Unlock' : 'Lock',
      handlerConfig: () => {
        curComp.config.disabledX = !curComp.config.disabledX
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 8,
      label: curComp.config.disabledY ? '允许Y轴移动' : '禁止Y轴移动',
      icon: curComp.config.disabledY ? 'Unlock' : 'Lock',
      handlerConfig: () => {
        curComp.config.disabledY = !curComp.config.disabledY
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 9,
      label: curComp.config.disabledW ? '允许修改宽度' : '禁止修改宽度',
      icon: curComp.config.disabledW ? 'Unlock' : 'Lock',
      handlerConfig: () => {
        curComp.config.disabledW = !curComp.config.disabledW
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 10,
      label: curComp.config.disabledH ? '允许修改高度' : '禁止修改高度',
      icon: curComp.config.disabledH ? 'Unlock' : 'Lock',
      handlerConfig: () => {
        curComp.config.disabledH = !curComp.config.disabledH
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 11,
      label: curComp.config.parent ? '允许拖出父节点' : '禁止拖出父节点',
      icon: curComp.config.parent ? 'Unlock' : 'Lock',
      handlerConfig: () => {
        curComp.config.parent = !curComp.config.parent
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 12,
      label: '下载',
      icon: 'Download',
      handlerConfig: () => {
        html2canvas(document.getElementById(`workspace-panel-edit-comp-contextmenu${curComp.id}`) as HTMLElement).then(canvas => {
          canvas.toBlob((blob: Blob | null) => {
            download(blob, `${curComp.label}.png`)
          }, "image/png")
        })
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 13,
      label: '置顶',
      icon: 'Top',
      handlerConfig: () => {
        eventBus.emit(CompContextMenuEnum.LAYER_TOPPING, curComp.id)
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 14,
      label: '置底',
      icon: 'Bottom',
      handlerConfig: () => {
        eventBus.emit(CompContextMenuEnum.LAYER_BOTTOMING, curComp.id)
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 15,
      label: '上移',
      icon: 'ArrowUp',
      handlerConfig: () => {
        eventBus.emit(CompContextMenuEnum.LAYER_MOVE_UP, curComp.id)
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 16,
      label: '下移',
      icon: 'ArrowDown',
      handlerConfig: () => {
        eventBus.emit(CompContextMenuEnum.LAYER_MOVE_DOWN, curComp.id)
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    },
    {
      id: 17,
      label: '删除',
      icon: 'Delete',
      handlerConfig: () => {
        eventBus.emit(CompContextMenuEnum.LAYER_DELETE, curComp.id)
        emits(CompContextMenuEnum.HIDE_CONTEXT_MENU)
      }
    }
  ])
}